<template>
  <div class="deleteSpace">
    <h3>删除空间</h3>
    <n-divider class="deleteSpace-divider" />
    <div class="deleteSpace-tip1">
      此操作无法恢复！请慎重操作！
    </div>
    <div class="deleteSpace-tip1">
      删除空间将会连同其相关的所有数据包括(空间文章、评论、点赞、收藏、空间成员)一并删除，请谨慎操作！
    </div>
    <n-button type="error" class="delete-button" @click="delete_space">删除空间</n-button>
  </div>
</template>

<script setup lang='ts'>
import { DeleteSpace } from '../../api/space'
import {useRouter} from 'vue-router'
const router = useRouter()
import { useDialog } from 'naive-ui';
const dialog = useDialog()

const props = defineProps<{
  spaceId: string
}>()

const delete_space = () => {
  dialog.warning({
    title: '警告',
    content: '确定删除该空间？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      // 删除空间
      await DeleteSpace(Number(props.spaceId))
      router.push('/home')
    },
    onNegativeClick: () => {
    }
  })
}
</script>

<style lang='scss' scoped>
.deleteSpace {
  width: 100%;
  min-height: 100%;
  padding: 0 30px;
  box-sizing: border-box;

  .deleteSpace-divider {
    margin: 0;
  }
  .deleteSpace-tip1{
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
    padding-left: 20px;
    box-sizing: border-box;
    font-weight: 700;
    margin-top: 20px;
    background-color: #FFE8E6;
    color: #DB2828;
    box-shadow: 0px 0px 0px 1px #db2828 inset, 0px 0px 0px 0px rgba(0,0,0,0);
  }
  .delete-button{
    margin-top: 20px;
  }
}

</style>